<template>
  <div class="records">
    <el-card shadow="never" style="width: 100%">
      <template #header>
        <span>考试记录</span>
      </template>

      <!-- 查询表单 -->
      <el-form :inline="true" :model="queryForm" class="query-form">
        <el-form-item label="学生姓名">
          <el-input
            v-model="queryForm.name"
            placeholder="请输入学生姓名"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="分数范围">
          <el-input
            v-model.number="queryForm.minScore"
            placeholder="最低分"
            type="number"
            clearable
            style="width: 100px"
          />
          <span style="margin: 0 5px">-</span>
          <el-input
            v-model.number="queryForm.maxScore"
            placeholder="最高分"
            type="number"
            clearable
            style="width: 100px"
          />
        </el-form-item>
        <el-form-item label="是否通过">
          <el-select v-model="queryForm.passed" placeholder="全部" clearable style="width: 150px">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="通过" :value="1"></el-option>
            <el-option label="未通过" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table :data="records" stripe style="width: 100%" :fit="true" v-loading="loading">
        <el-table-column prop="id" label="ID" min-width="240"></el-table-column>
        <el-table-column prop="name" label="学生姓名" min-width="120">
          <template #default="scope">
            {{ scope.row.name || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="studentNo" label="学号" min-width="150">
          <template #default="scope">
            {{ scope.row.studentNo || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="score" label="分数" min-width="100"></el-table-column>
        <el-table-column label="是否通过" min-width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.passed === 1" type="success">通过</el-tag>
            <el-tag v-else type="danger">未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="提交时间" min-width="200"></el-table-column>
        <el-table-column prop="attemptNo" label="尝试次数" min-width="100"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 20px; text-align: center">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next, total"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { recordApi } from '@/api/record'

const records = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = 10
const loading = ref(false)

// 查询表单
const queryForm = ref({
  name: '',
  minScore: null,
  maxScore: null,
  timeRange: null,
  passed: null
})

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    const response = await recordApi.listRecords(
      currentPage.value,
      pageSize,
      null, // studentId
      queryForm.value.passed !== null && queryForm.value.passed !== '' ? queryForm.value.passed : null
    )
    
    records.value = response.data.records || []
    total.value = response.data.total || 0
  } catch (error) {
    // 错误信息已在request拦截器中处理
  } finally {
    loading.value = false
  }
}

// 查询
const handleQuery = () => {
  currentPage.value = 1
  loadData()
}

// 重置
const handleReset = () => {
  queryForm.value = {
    name: '',
    minScore: null,
    maxScore: null,
    timeRange: null,
    passed: null
  }
  currentPage.value = 1
  loadData()
}

// 分页切换
const handlePageChange = (page) => {
  currentPage.value = page
  loadData()
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.records {
  width: 100%;
  height: 100%;
}

/* 确保卡片和表格完全铺满 */
:deep(.el-card) {
  width: 100%;
}

:deep(.el-card__body) {
  padding: 20px;
}

.query-form {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.query-form .el-form-item {
  margin-bottom: 10px;
}
</style>

